<template>
  <el-card class="box-card">
  <div slot="header" class="clearfix">
    <shopee-row class="row">
      <shopee-col :span="1" vertical-align="center" align="center">
        项目
      </shopee-col>

      <shopee-col :span="4" vertical-align="center" align="center">

        <el-select v-model="projectId" placeholder="请选择" @change="changeProjectId">
          <el-option
            v-for="item in projectList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </shopee-col>

      <shopee-col :span="2" vertical-align="center" align="center">
        发布任务名
      </shopee-col>
      <shopee-col :span="4">
        <shopee-input v-model="searchForm.task_instance_name" @keyup.enter.native="search()"></shopee-input>
      </shopee-col>
      <shopee-col :span="1" :offset="1">
        <el-button type="primary" @click="search()">查询</el-button>
      </shopee-col>
      <br>
    </shopee-row>
    <shopee-table class=dataTable stripe :data="taskInstanceListData">

  <shopee-table-column prop="name" label="发布任务名"  fixed="left" :width="250">
      </shopee-table-column>

      <shopee-table-column  label="任务状态" :width="150">
        <template slot-scope="props">
          <div v-if="props.row.status === 'running'">
            <shopee-tag status="success">{{props.row.status}}</shopee-tag>
          </div>
          <div v-if="props.row.status === 'end' || props.row.status === 'finish'">
            <shopee-tag status="invalid">{{props.row.status}}</shopee-tag>
          </div>
        </template>
      </shopee-table-column>

      <shopee-table-column prop="createtime" label="创建时间"  :width="200">
      </shopee-table-column>


<!--      <shopee-table-column prop="project_name" label="所属项目"  :width="100">-->
<!--      </shopee-table-column>-->

<!--      <shopee-table-column prop="task_id" label="实例ID" :width="100">-->
<!--      </shopee-table-column>-->


      <shopee-table-column prop="admin" label="管理员" :width="250">
      </shopee-table-column>



       <shopee-table-column prop="action" label="操作" fixed="right" :width="300">
        <template slot-scope="props">
          <el-button  size="small" v-if="props.row.status === 'running'" @click="stop(props.row.id)" type="danger" outline>停止</el-button>
          <el-button  size="small" v-if="props.row.status === 'end'" @click="resume(props.row.id)" type="success" outline>恢复</el-button>
          <el-button  size="small" @click="toTaskInstanceDetails(props.row.id)" type="primary" outline>查看</el-button>
        </template>
      </shopee-table-column>
    </shopee-table>
     <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5,10, 15, 20, 25]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalRow">
      </el-pagination>
  </div>
  </el-card>
  </template>

  <script>
    import {api, getRequest, postRequest} from "@/api/commit";

    export default {
      name : "TaskInstanceListView",
      data() {
        return {
          taskInstanceListData: [],
          currentPage: 1,
          totalRow: 0,
          pageSize: 10 ,
          searchForm:{
            task_instance_name:'',
          },
          projectId:3,
          projectList: [{
              id: 3,
              name: 'CRM'
            }],
        }
      },
      methods: {
        stop(id) {
          let params = {
            "id":id
          }
          postRequest(api['task_instance_end'],params).then((res) => {
            res = res.resultReturn
            this.init_data()
          }, (error) => {
            console.info(error)
          })
        },
        handleSizeChange(val) {
             this.pageSize = val;
             this.init_data();
        },
        handleCurrentChange(val) {
             this.currentPage = val;
             this.init_data();
        },
        resume(id) {
          let params = {
            "id":id
          }
          postRequest(api['task_instance_resume'],params).then((res) => {
            res = res.resultReturn
            this.init_data()
          }, (error) => {
            console.info(error)
          })
        },
        toTaskInstanceDetails: function(id){
          this.$router.push({
            path: '/TaskInstanceDetailsView',
            query:{
              id:id
            }
          })
        },
        changeProjectId(){
          // console.log("changeProjectId")
          // console.log(this.projectId)
          if (this.projectId!==0){
             this.$cookies.set('projectId',this.projectId)
             this.init_data()
          }
        },
        init_select(){
          // console.log("init_select")
          getRequest(api['project_list'],{}).then((res) => {
            res = res.resultReturn
            this.projectList= res.data
            var projectId=this.$cookies.get('projectId')
            // // console.log(projectId)
            if(projectId!==null && projectId!==0 ){
               this.projectId=parseInt(projectId)
            }
            this.init_data()
          }, (error) => {
            console.info(error)
          })
        },
        init_data() {
          // console.log("init_data")
          getRequest(api['task_instance_list'],{
            "task_instance_name":this.searchForm.task_instance_name,
            "project_id":this.projectId,
            "page_size":this.pageSize,
            "page":this.currentPage}).then((res) => {
            res = res.resultReturn
            this.taskInstanceListData= res.data
            this.totalRow=res.total
          }, (error) => {
            console.info(error)
          })
        },
        search() {
          this.init_data()
        },
      },
      mounted () {
        this.init_select()
        // this.init_data()
      }
    }
  </script>
